<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>伸缩的菜单，用jQuery重写</title>
    <style>
        <!--
        body {
            background-color: #ffffff;
        }

        #navigation {
            width: 200px;
            font-family: Arial;
        }

        #navigation > ul {
            list-style-type: none; /* 不显示项目符号 */
            margin: 0px;
            padding: 0px;
        }

        #navigation > ul > li {
            border-bottom: 1px solid #8ec2f5; /* 添加下划线 */
        }

        #navigation > ul > li > a {
            display: block; /* 区块显示 */
            padding: 5px 5px 5px 0.5em;
            text-decoration: none;
            border-left: 12px solid #712704; /* 左边的粗红边 */
            border-right: 1px solid #8ec2f5; /* 右侧阴影 */
        }

        #navigation > ul > li > a:link, #navigation > ul > li > a:visited {
            background-color: #04477C;
            color: #FFFFFF;
        }

        #navigation > ul > li > a:hover {
            /* 鼠标经过时 */
            background-color: #43a102; /* 改变背景色 */
            color: #ffff00; /* 改变文字颜色 */
        }

            /* 子菜单的CSS样式 */
        #navigation ul li ul {
            list-style-type: none;
            margin: 0px;
            padding: 0px 0px 0px 0px;
        }

        #navigation ul li ul li {
            border-top: 1px solid #8ec2f5;
        }

        #navigation ul li ul li a {
            display: block;
            padding: 3px 3px 3px 0.5em;
            text-decoration: none;
            border-left: 28px solid #bf3604;
            border-right: 1px solid #8ec2f5;
        }

        #navigation ul li ul li a:link, #navigation ul li ul li a:visited {
            background-color: #049ff1;
            color: #FFFFFF;
        }

        #navigation ul li ul li a:hover {
            background-color: #43a102;
            color: #ffff00;
        }

        #navigation ul li ul.myHide {
            /* 隐藏子菜单 */
            display: none;
        }

            /*
            不再需要myShow样式
            #navigation ul li ul.myShow{
             display:block;
            }
            */
        -->
    </style>
    <script language="javascript" src="js/jquery-1.7.2.min.js"></script>
    <script language="javascript">
        $(function () {
            //找到所有li标记中包含的ul标记
            //然后找到它的前一个标记（即<a>），并添加click()事件
            $("li").find("ul").prev().click(function () {
                //点击<a>时让它后面的兄弟（即<ul>）切换CSS样式
                $(this).next().toggleClass("myHide");
            });
        });
    </script>
</head>
<body>
<div id="navigation">
    <ul id="listUL">
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a>
            <ul class="myHide">
                <li><a href="#">Lastest News</a></li>
                <li><a href="#">All News</a></li>
            </ul>
        </li>
        <li><a href="#">Sports</a>
            <ul class="myHide">
                <li><a href="#">Basketball</a></li>
                <li><a href="#">Football</a></li>
                <li><a href="#">Volleyball</a></li>
            </ul>
        </li>
        <li><a href="#">Weather</a>
            <ul class="myHide">
                <li><a href="#">Today's Weather</a></li>
                <li><a href="#">Forecast</a></li>
            </ul>
        </li>
        <li><a href="#">Contact Me</a></li>
    </ul>
</div>
</body>
</html>
